<!--长效养护-->
<template>
  <page-meta
    :page-font-size="baseFontSize + 'rpx'"
    :root-font-size="baseFontSize + 'rpx'"
  ></page-meta>
  <view class="content">
    <!-- 此处为了让reload时不自动滚动到顶部，需要设置auto-clean-list-when-reload和auto-scroll-to-top-when-reload为false，即在reload时关闭自动清空数组和自动滚动到顶部 -->
    <z-paging
      ref="paging"
      v-model="dataList"
      :auto-clean-list-when-reload="false"
      :auto-scroll-to-top-when-reload="false"
      :refresher-status.sync="refresherStatus"
      @query="loadList"
    >
      <!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
      <view style="z-index: 100; position: sticky; top: 0">
        <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
        <app-tabs v-model="tabIndex" :tabs="taskAuthType" @change="tabChange"></app-tabs>
        <uni-search-bar
          v-model="searchValue"
          bgColor="#F7F8FA"
          radius="5"
          placeholder="请输入流程名称"
          clearButton="auto"
          cancelButton="none"
          @input="search"
        />
      </view>
      <!-- 自定义下拉刷新view -->
      <!-- <template #refresher>
				  <custom-refresher :status="refresherStatus" />
			  </template> -->
      <view class="item" v-for="(item, index) in dataList">
        <view>
          <view class="flex justify-between align-center" @tap="toTaskDetail(item)">
            <text class="name">{{
              item.businessExpand.caseCode || item.businessExpand.taskName
            }}</text>
            <uni-icons type="forward" size="16" color="#597EF7"></uni-icons>
          </view>
          <view class="flex justify-between align-end">
            <view class="time">
              <view v-if="tabIndex != 0"
                >流程发起人：{{ item.processInstance.startUserNickname || '' }}</view
              >
              <view>当前审批节点：{{ item.name }}</view>
              <view v-if="tabIndex != 0">所属流程：{{ item.processInstance.name }}</view>
              <view>创建时间：{{ parseTime(item.createTime) }}</view>
              <view>审批时间：{{ item.endTime ? parseTime(item.endTime) : '' }}</view>
              <view :style="{ color: item.result == 3 ? 'red' : '#13ce66' }"
                >审批状态：{{
                  item.result == 3 ? '不通过' : tabIndex == 1 ? '激活' : '通过'
                }}</view
              >
              <view
                :style="{ color: item.result == 3 ? 'red' : '#13ce66' }"
                v-if="item.turnReason"
                >驳回理由：{{ item.turnReason }}</view
              >
            </view>
            <!-- <view
				class="btn"
				@tap="
				  navTo(
					`/pages/addForm/changxiaoyanghu?id=${item.taskId}&projectName=${item.taskName}&facilityName=${item.facilityName}&placeName=${item.partNames}&compName=${item.compNames}&componentId=${item.compIds}&frequencyValue=${item.frequencyValue}`
				  )
				"
				>任务上报</view
			  > -->
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import appTabs from '@/components/app-tabs.vue';
import {
  getMyProcessInstancePage,
  getTodoTaskPage,
  getDoneTaskPage
} from '@/api/common.js';
import { parseTime } from '@/utils/ruoyi';
export default {
  mixins: [MescrollMixin],
  components: { appTabs },
  data() {
    return {
      list: 20,
      tabIndex: 0,

      taskAuthType: [
        //任务审核进度
        {
          value: 0,
          name: '我的流程',
          method: getMyProcessInstancePage
        },
        {
          value: 1,
          name: '待办任务',
          method: getTodoTaskPage
        },
        {
          value: 2,
          name: '已办任务',
          method: getDoneTaskPage
        }
      ],
      topH: 190,
      dataList: [],
      refresherStatus: 0,
      searchValue: ''
    };
  },
  computed: {
    baseFontSize() {
      return this.$store.getters.fontSize;
    }
  },
  onShow() {
    this.$refs.paging.reload();
  },
  methods: {
    parseTime(time) {
      return parseTime(time);
    },
    calcArr(str) {
      if (!str) {
        return [];
      } else {
        return str.split(',');
      }
    },
    previewImage(photoImg, index) {
      uni.previewImage({
        current: index,
        urls: photoImg
      });
    },
    toTaskDetail(item) {
      this.navTo(
        `/pages/work/detail?id=${this.tabIndex == 0 ? item.id : item.processInstance.id}`
      );
      // this.navTo(
      //   `/pages/richangxuncha/shigongshangbaoxiangqing?id=${item.taskId}&taskName=${item.taskName}&caseStatus=${item.caseStatus}&caseCodes=${item.caseCodes}&expectEndDate=${item.expectEndDate}&facilityName=${item.facilityName}&placeName=${item.partNames}&compName=${item.compNames}&componentId=${item.compIds}&frequencyValue=${item.frequencyValue}`
      // );
    },
    search(e) {
      this.loadList(1, 10);
    },
    tabChange(e) {
      this.$refs.paging.reload();
    },
    loadList(pageNo, pageSize) {
      // 调用接口获取列表数据
      console.log(
        '%c [ this.taskAuthType[this.tabIndex][0] ]-163',
        'font-size:13px; background:pink; color:#bf2c9f;',
        this.taskAuthType[this.tabIndex].method
      );
      let { method } = this.taskAuthType[this.tabIndex];
      method({
        pageNo: pageNo,
        pageSize: pageSize
      })
        .then((res) => {
          this.$refs.paging.complete(res.data.list);
        })
        .catch((res) => {
          this.$refs.paging.complete(false);
        });
    },
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    upCallback() {
      // this.getProductList();
    },
    navTo(path) {
      this.$tab.navigateTo(path);
    },
    changeFontSize(fontSize) {
      this.baseFontSize = fontSize;
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../richangxuncha/index.scss';

.list-area {
  height: 300upx;
}

.u-page {
  background: #fff;
  height: 100vh;
}

.top-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 0 22upx;
}

.btn {
  color: #fff;
  width: 160upx;
  height: 4.8rem;
  background: #597ef7;
  border-radius: 8upx;
  color: #fff;
  line-height: 4.8rem;
  text-align: center;
}

/deep/.uni-searchbar {
  background: #f1f1f1;
}
.fontList {
  position: fixed;
  display: flex;
  justify-content: space-around;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30upx 20upx;
  background: #fff;
}
.time view:nth-of-type(2) {
  display: flex;
  margin: 10upx 0;
  img {
    width: 200upx;

    margin-right: 5upx;
  }
}
/deep/ .uni-searchbar__box-search-input {
  height: 40upx !important;
}
.img-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  grid-gap: 40rpx;
  gap: 40rpx;
  img {
    width: 66px;
  }
}
</style>
